<template>
    <div class="environment-wrapper">
        <div class="environment-top">
            <el-tag type="success" color="black" size="medium" effect="light">养殖环境参数</el-tag>
        </div>
        <div class="environment-center">
            <div class="temp">
                <p>
                    <el-button type="primary" @click.native="btnClick(1)" size="small">温度</el-button>
                    <span class="tem-span">{{this.totalInfor.data.data.data.temperature}}°C</span>
<!--                    <span class="tem-span">{{this.temNumber}}</span>-->
                </p>
            </div>
            <div class="oxWater">
                <p>
                    <el-button type="primary" @click.native="btnClick(2)" size="small">溶解氧</el-button>
                    <span class="ox-span">{{this.totalInfor.data.data.data.dissolvedOxygen}}</span>
                </p>
            </div>
            <div class="PH">
                <p>
                    <el-button type="primary" @click="btnClick(3)" size="small">PH值</el-button>
                    <span class="tem-span">{{this.totalInfor.data.data.data.phValue}}</span>
                </p>
            </div>
            <div class="slat">
                <p>
                    <el-button type="primary" @click="btnClick(4)" size="small">盐度</el-button>
                    <span>{{this.totalInfor.data.data.data.salinity}}</span>
                </p>
            </div>
            <div class="NH">
                <p>
                    <el-button type="primary" @click="btnClick(5)" style="margin-left: 0.25rem" size="small">氨氮浓度</el-button>
                    <span>{{this.totalInfor.data.data.data.anconcentration}}</span>
                </p>
            </div>
            <div class="mix">
                <p>
                    <el-button type="primary" @click="btnClick(6)" size="small">浊度</el-button>
                    <span>{{this.totalInfor.data.data.data.turbidity}}</span>
                </p>
            </div>
        </div>
        <div class="environment-bottom">
            <div v-if="ifShow==1">
                <p style="font-size:0.2rem;margin-top: 0.25rem;color: #33cea0">温度折线图</p>
                <temChart></temChart>
            </div>
            <div v-if="ifShow==2">
                <p style="font-size:0.2rem;margin-top: 0.25rem;color: #33cea0">溶解氧参数</p>
                <oxWaterChart></oxWaterChart>
            </div>
            <div v-if="ifShow==3">
                <p style="font-size:0.2rem;margin-top: 0.25rem;color: #33cea0">PH值参数</p>
                <ph-chart></ph-chart>
            </div>
            <div v-if="ifShow==4">
                <p style="font-size:0.2rem;margin-top: 0.25rem;color: #33cea0">盐度参数</p>
                <slatChart></slatChart>
            </div>
            <div v-if="ifShow==5">
                <p style="font-size:0.2rem;margin-top: 0.25rem;color: #33cea0">氨氮浓度</p>
                <NHChart></NHChart>
            </div>
            <div v-if="ifShow==6">
                <p style="font-size:0.2rem;margin-top: 0.25rem;color: #33cea0">浊度参数</p>
                <mixChart></mixChart>
            </div>
        </div>
    </div>
</template>

<script>
    import temChart from "./temChart";
    import phChart from "./phChart";
    import oxWaterChart from "./oxWaterChart";
    import slatChart from "./slatChart";
    import NHChart from "./NHChart";
    import mixChart from "./mixChart";
    import Axios from 'axios'

    export default {
        name: "envirment",
        components:{
            temChart,
            phChart,
            oxWaterChart,
            slatChart,
            NHChart,
            mixChart
        },
        data(){
            return{
                ifShow:1,
                temNumber:'',
                totalInfor: {}
            }
        },
        created() {
            this.findInfor();
        },
        mounted() {
            setInterval(this.findInfor,10000)
        },
        methods:{
            btnClick(num) {
                this.ifShow = num;
            },
            findInfor(){
                Axios.get('http://49.232.131.98/mqtt/data/new_val').then((res) => {
                    // console.log(res);
                    this.totalInfor = res
                }).catch((err) => {

                    console.log(err)

                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .environment-wrapper{
        height: 7.7rem;
        .environment-center{
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
            align-content: space-around;
            height: 1.5rem;
            margin-top: 0.1rem;
            div{
                width: 33.3%;
                span{
                    margin-left: 0.25rem;
                    font-size: 0.2rem;
                }
            }
        }
        .environment-bottom{
            height: 4.7rem;
        }

    }
    p{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .tem-span{

    }
    .ox-span{

    }
</style>
